<template>
	<uni-nav-bar 
		:border="props.border" 
		:statusBar="props.statusBar" 
		:shadow="props.shadow" 
		:fixed="props.fixed" 
		:title="props.title"
		backgroundColor="#ff0000"
		color="#fff"
	>
		<view v-if="props.search" class="search align-middle align-center">
			<input placeholder="请输入关键词" />
			<view class="btn"> <uni-icons type="search" size="20" /> </view>
		</view>
		<template #left>
			<view class="flex">
				<uni-icons :type="props.leftIcon" size="20" color="#fff" @click="handleLeftIconClick" />
			</view>
		</template>
		<template #right>
			<view v-if="props.leftIcon=='scan'" class="flex">
				<uni-icons type="person" size="18" color="#fff" /> <text>登录</text>
			</view>
			<view v-else class="flex">
				<uni-icons type="home" size="20" color="#fff" @click="handleNavigateTo('/pages/mall/index')"/>
			</view>
		</template>
	</uni-nav-bar>
</template>

<script setup>	
	import { ajaxRequest, apiPath, checkLogin, goBack, formatDate,handleNavigateTo } from "../lib/func.js";

	const props = defineProps({
		border: {
			type: Boolean,
			default: false,
		},
		statusBar: {
			type: Boolean,
			default: true,
		},
		shadow: {
			type: Boolean,
			default: true,
		},
		fixed: {
			type: Boolean,
			default: true,
		},
		leftIcon: {
			type: String,
			default: 'left',
		},
		search: {
			type: Boolean,
			default: false,
		},
		title: {
			type: String,
			default: '去创未来',
		},
	});
	const handleLeftIconClick = () => {
		if(props.leftIcon == 'scan'){
			handleNavigateTo('/pages/member/scan');
		}
		if(props.leftIcon == 'left'){
			goBack();
		}
	}
</script>

<style lang="scss" scoped>
	.search{
		display: inline-block;
		width: 100%;
		height: 40px;
		display: flex;
		input{
			width: calc(100% - 50px);
			background-color: #fff;
			font-size: 12px;
			border: none;
			height: 20px;
			color: #333;
			padding: 1px 10px;
			border-top-left-radius: 3px;
			border-bottom-left-radius: 3px;
		}
		.btn{
			width: 30px;
			height: 20px;
			padding-top: 2px;
			color: #ff0000;
			background: #fff;
			text-align: center;
			border-top-right-radius: 3px;
			border-bottom-right-radius: 3px;
		}
	}
</style>